<template>
  <el-container v-if="type === 'implements'" class="mainDetails">
    <el-main class="mainDetails">
      <!-- 页面主体内容 -->
      <el-collapse v-model="logisticsName">
        <el-collapse-item name="removeMaterialApply">
          <template slot="title">
            <i class="item_icon" />{{ implementsTitle }}
          </template>
          <div class="content-box">
            <div v-if="!query.subType" class="operation-wrapper">
              <div class="position-abs abs-right">
                <el-button
                  class="pms-button-primary mr-5"
                  @click="
                    handleMaterialApplication(
                      'application',
                      '物资申领'
                    )
                  "
                >申领</el-button>
                <el-button
                  class="pms-button-primary"
                  @click="
                    handleMaterialApplication(
                      'remove',
                      '物资退库'
                    )
                  "
                >退库</el-button>
              </div>
            </div>
            <material-detail ref="materialDetail" />
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-main>
    <!-- 物资申领操作弹框 -->
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      :visible.sync="materialsApplicationVisible"
      width="90%"
    >
      <div slot="title" class="dialog-header">{{ title }}</div>
      <materials-application
        v-if="componentsType === 'application'"
        ref="materialsApplication"
        :meta-edit="metaEdit"
        :flag="applicationDialogFlag"
        :note.sync="note"
        :receive-details-data="receiveDetailsData"
        @doSaveApplyBySite="queryReceiveDetails"
      />
      <update-remove-type
        v-if="componentsType === 'remove'"
        :table-data="updateRemoveData"
        :flag="applicationDialogFlag"
        :meta-edit="metaEdit"
        :prj-params="prjParams"
      />
    </el-dialog>
  </el-container>
  <el-container v-else class="mainDetails">
    <el-main>
      <!-- 页面主体内容 -->
      <el-collapse v-if="type === 'back'" v-model="logisticsName">
        <el-collapse-item name="removeMaterialApply">
          <template slot="title">
            <i class="item_icon" />物资退库申请单
          </template>
          <div class="content-box">
            <div class="table-name-content">物资领用详情</div>
            <update-remove-type :meta-edit="metaEdit" :prj-params="prjParams" />
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-collapse v-if="type === 'detail'" v-model="logisticsName">
        <el-collapse-item name="removeMaterialInfo">
          <template slot="title">
            <i class="item_icon" />出库明细单
            <!--            <span class="ml-5 font-remove-weight">{{-->
            <!--              projectInfo.projectName-->
            <!--            }}</span>-->
            <!--            【-->
            <!--            <span class="font-remove-weight" style="cursor: pointer !important;">{{-->
            <!--              projectInfo.prjCode-->
            <!--            }}</span>-->
            <!--            】-->
          </template>
          <div style="margin-bottom: 10px"><span>{{ projectInfo.projectName }}</span>【<span v-debounce="()=>jump(projectInfo.prjCode)" style="color: #53c7f8;cursor: pointer;">{{ projectInfo.prjCode }}</span>】</div>
          <div style="margin-bottom: 10px;color: #eb4b4b;display: flex">根据&lt;供应链管理部&gt;要求只允许塔、房和电源等设备退至虚拟库（即退库类型允许选择可用不入库或不可用不入库），其余物资不允许退至虚拟库。
            <el-button class="pms-button-primary" @click="clickMaterialClassify">可退至虚拟库物料分类</el-button></div>
          <div class="content-box">
            <update-remove-type
              :table-data="updateRemoveData"
              :project-info="projectInfo"
              :prj-params="prjParams"
              :meta-edit="metaEdit"
              @search="handleSearch"
              @removeMaterial="handleRemoveMaterial"
            />
            <div>
              <el-pagination
                v-if="isPagination"
                background
                :current-page.sync="pageNum"
                :page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="sumNum"
                @size-change="handlePageChange('size', $event)"
                @current-change="
                  handlePageChange('page', $event)
                "
              />
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-main>
    <el-dialog
      ref="materialClassification"
      v-dialogDrag
      :close-on-click-modal="false"
      :visible.sync="showMaterialClassification"
      width="70%"
    >
      <div slot="title" class="dialog-header">可退至虚拟库物料分类</div>
      <material-classification
        v-if="showMaterialClassification"
        ref="cancelRetreatVisible"
      />
    </el-dialog>
  </el-container>

</template>

<script>
// import HeaderTitle from '@/components/basic/HeaderTitle'
import materialDetail from './components/materialDetail.vue'
import updateRemoveType from './components/updateRemoveType.vue'
import {
    queryOsList,
    queryReceiveDetails,
    implementReceiveList,
    queryOsListWhole,
    getShopTokenAndUrl
} from '@/api/material'
import materialsApplication from '@/views/material/components/materialsApplication'
import $ from 'jquery'
import materialClassification from '@/views/material/components/materialClassification.vue'
export default {
    name: 'AcceptMangeDetail',
    components: {
        // removeMaterialsDetails,
        // HeaderTitle,
        materialDetail,
        // materialsInfoList,
        updateRemoveType,
        materialsApplication,
        materialClassification
    },
    props: {
        prjParams: {
            type: Object,
            default: () => ({})
        },
        isPagination: {
            type: Boolean,
            default: false
        },
        metaEdit: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            headerTitle: '物资退库',
            activeNames: [],
            childData: {},
            buttonDisable: ['doNext'],
            selectList: {},
            detailData: {},
            logisticsName: ['removeMaterialInfo', 'removeMaterialApply'],
            updateRemoveData: [], // 出库明细单表格数据
            type: 'detail',
            projectInfo: {
                projectName: '',
                prjCode: ''
            },
            form: {
                categoryCode: '',
                categoryName: '',
                applySno: '',
                orderId: ''
            },
            materialsApplicationVisible: false,
            showMaterialClassification: false,
            title: '物资申领',
            componentsType: '',
            applicationDialogFlag: 0,
            receiveDetailsData: {},
            note: '',
            implementsTitle: '物资退库申请单',
            pageNum: 1,
            pageSize: 9999,
            sumNum: 0
        }
    },
    async created() {
        this.initData()
    },
    methods: {
        async initData() {
            this.type = this.prjParams.pageType || 'detail'
            const prjId = this.prjParams.prjId
            this.queryReceiveDetails(prjId)
            if (this.prjParams.subType === 'receive') {
                this.implementsTitle = '物资申领信息'
            }
            if (this.prjParams.manageMode === '03' || this.prjParams.manageMode === '04') {
                const res = await queryOsListWhole({ prjId, pageNum: this.pageNum, pageSize: this.pageSize })
                if (+res.code === 200) {
                    this.updateRemoveData = res.data?.osData
                    this.sumNum = res.data?.total
                }
            } else {
                const res = await queryOsList({ prjId, pageNum: this.pageNum, pageSize: this.pageSize })
                if (+res.code === 200) {
                    this.updateRemoveData = res.data?.osData
                     this.sumNum = res.data?.total
                }
            }

            if (this.type === 'implements') {
                const resImplements = await implementReceiveList({ prjId, pageNum: this.pageNum, pageSize: this.pageSize })
                this.$refs.materialDetail.fileData = resImplements.data || []
            }
        },
        async handleSearch(form) {
            if (this.prjParams.manageMode === '03' || this.prjParams.manageMode === '04') {
                const res_ = await queryOsListWhole({
                    prjId: this.prjParams.prjId,
                    ...form,
                      pageNum: this.pageNum,
                pageSize: this.pageSize
                })
                if (+res_.code === 200) {
                    this.updateRemoveData = res_.data?.osData ?? []
                    this.sumNum = res_.data?.total || 0
                }
                return
            }
            const res = await queryOsList({ prjId: this.prjParams.prjId, ...form, pageNum: this.pageNum,
                pageSize: this.pageSize })
            if (+res.code === 200 && res.data) {
                this.updateRemoveData = res.data.osData
                this.sumNum = res.data?.total
            } else {
                this.updateRemoveData = []
                this.sumNum = res.data?.total || 0
            }
        },
        async queryReceiveDetails(prjId) {
            const res = await queryReceiveDetails({
                prjId: prjId || this.prjParams.prjId
            })
            if (+res.code === 200) {
                this.receiveDetailsData = res.data
                this.projectInfo = res.data.prjInfo
            }
        },
        handleMaterialApplication(type, title) {
            this.componentsType = type
            this.title = title
            this.materialsApplicationVisible = true
        },
        clickMaterialClassify() {
            this.showMaterialClassification = true
        },
        handleRemoveMaterial() {
            this.handleSearch({
                ...this.form,
                pageNum: 1,
                pageSize: this.pageSize
            })
        },
          handlePageChange(val, e) {
            if (val === 'page') {
                console.log(this.pageNum)
                this.pageNum = e
            } else {
                this.pageSize = e
            }
            this.handleSearch({
                ...this.form,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            })
        },
        // 点击
        async jump(prjCode) {
            const res = await getShopTokenAndUrl({
                prjCode
            })
            if (+res.code === 200) {
                const data = res.data
                const toUrl = `${data.assetsResource.url}systemManagement/pmsReturnInput`
                const params = {}
                // userName=${data.assetsResource.userId}&cityName=${data.cityName}&projectCode=${data.prjCode}&projectName=${data.projectName}&provinceCode=${data.provinceCode}&orgCode=${data.orgCode}
                params.token = data.assetsResource.token
                params.acctId = data.assetsResource.acctId
                params.username = data.assetsResource.userId
                params.cityName = data.cityName ?? 'null'
                params.projectCode = data.prjCode
                params.projectName = data.projectName
                params.provinceCode = data.provinceCode
                params.orgCode = data.orgCode
                const newWin = window.open()
                const form = $("<form method='get'></form>")
                form.attr({ action: toUrl })
                $.each(params, function(key, value) {
                    const input = $("<input type='hidden' />")
                    input.attr({ name: key })
                    input.val(value)
                    form.append(input)
                })
                form.appendTo(newWin.document.body)
                form.submit()
            }
        }

    }
}
</script>

<style lang="scss" scoped>
html,
body {
    height: auto;
}
// .mainDetails{
//     margin-left:20px;
//     margin-right:20px;
// }
.el-collapse {
    margin-bottom: 20px;
}
.el-collapse-item {
    // box-shadow: 0px 0px 6px 0px rgba(191, 192, 192, 0.52);
    /* 调整各个item之间的距离为20px */
    /* border: 1px; */
}

.el-collapse-item__wrap {
    padding: 0 20px;
    /* 为el-collapse-item的内容添加20像素的padding */
}

.el-collapse-item__header {
    padding-left: 20px;
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 600;
}

.item_icon {
    width: 6px;
    background: rgb(235, 75, 75);
    height: 15px;
    margin-right: 10px;
    border-radius: 10px;
}

.content-box {
    width: 100%;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 400;
    line-height: 25px;
}
.ml-5 {
    margin-left: 5px;
}
.font-remove-weight {
    font-weight: normal;
}

.operation-wrapper {
    position: relative;
    height: 25px;
    width: 100%;
    margin-bottom: 5px;
    .position-abs {
        position: absolute;
    }
    .abs-right {
        right: 10px;
    }
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #f56c6c;
}
::v-deep .el-pagination.is-background{
    margin-top:10px;
    display: flex;
}
::v-deep .el-pagination__sizes{
    margin-right:auto
}

</style>
